<template>
  <div style="height:100vh;background: #e8e8e8;">
    <div class="title">档案查询</div>
    <van-form
      id="detail"
      @submit="onSubmit"
      style="background: rgb(232, 232, 232);"
    >
      <van-field
        v-model="code"
        name="code"
        label="辅料编号"
        clearable
        placeholder="辅料编号"
        @blur="getList"
        @click-right-icon="scanCode"
        :rules="[{ required: true, message: '请填写辅料编号' }]"
      >
        <van-icon
          name="scan"
          slot='right-icon'
          style="padding: 0 5px;font-size: 20px!important;color:black!important;"
        ></van-icon>
          </van-field>
        <van-cell
          title="产品编码"
          :value="form.code"
        />
        <van-cell
          title="辅料名称"
          :value="form.name"
        />
        <van-cell
          title="辅料大类"
          :value="form.classifyBigValue"
        />
        <van-cell
          title="辅料中类"
          :value="form.classifySmallValue"
        />
        <van-cell
          title="辅料小类"
          :value="form.classifyLittleValue"
        />
        <van-cell
          title="特殊属性"
          :value="form.classifyMinimumValue"
        />
        <van-cell
          title="价格方案"
          :value="form.priceProgrammeValue"
        />
        <van-cell
          title="供应类型"
          :value="form.supplyTypeValue"
        />
        <van-cell
          title="采购单位"
          :value="form.purchasingUnitValue"
        />
        <van-cell
          title="损耗率"
          :value="form.wasteRate"
        />
        <van-cell
          title="产品年份"
          :value="form.productYearValue"
        />
        <van-cell
          title="对应上货季"
          :value="form.putGoodsSeasonValue"
        />
        <van-cell
          title="产品材质/成分"
          :value="form.textureComponent"
        />
        <van-cell
          title="克重"
          :value="form.gramWeight"
        />
        <van-cell
          title="缩率"
          :value="form.minification"
        />
        <van-cell
          title="门幅/段长"
          :value="form.widthSegmentLength"
        />
        <van-cell
          title="大货周期"
          :value="form.bigGoodsCycle"
        />
        <van-cell
          title="快反周期"
          :value="form.quickBackCycle"
        />
        <van-cell
          title="粘衬温度"
          :value="form.stickLiningTemperature"
        />
        <van-cell
          title="粘衬时间"
          :value="form.stickLiningTime"
        />
        <van-cell
          title="粘衬压力"
          :value="form.stickLiningPressure"
        />
        <van-cell
          title="产地"
          :value="form.placeOfOrigin"
        />
        <van-cell
          title="默认供应商"
          :value="supply"
        />
        <van-cell
          title="产品特性说明"
          :value="form.specialExplain"
        />
        <van-cell
          title="旧物料编号"
          :value="form.userName"
        />
        <van-cell
          title="规格"
          :value="specs"
        />
    </van-form>
  </div>

</template>
<script type=\'text/javascript\' src=\'//g.alicdn.com/sj/lib/zepto/zepto.min.js\' charset=\'utf-8\'></script>
<script type="text/javascript" src="http://g.alicdn.com/ilw/ding/0.9.2/scripts/dingtalk.js"></script>
<script>
import { Notify } from 'vant'
import { postAction } from '@/api/manage'
import * as dd from 'dingtalk-jsapi'

export default {
  components: {},
  data() {
    return {
      code: '',
      supply: '',
      specs: '',
      form: {}
    }
  },
  created: function () {
    document.title = '档案查询'
  },
  mounted() {},
  methods: {
    scanCode(e) {
      e.preventDefault()
      let that = this
      dd.biz.util.scan({
        type: 'barCode', //type为qrCode或者barCode 二维和一维
        onSuccess: function (data) {
          // const arr = data.text.split('.com')
          // that.code = arr[1].trim()
          that.code = data.text
          if (that.code) {
            that.getList()
          }
        },
        onFail: function (err) {
          // alert('scan fail:' + JSON.stringify(err))
        }
      })
    },
    getList() {
      window.scroll(0, 0)
      this.loading = true
      if (this.code) {
        const params = {
          accCode: this.code
        }
        try {
          postAction(`/basemgt-material/accessories/info`, params).then(res => {
            if (res.code == 200) {
              this.form = res.data
              if (this.form.accId) {
                this.$nextTick(() => {
                  this.loadAccSupply(this.form.accId)
                  this.loadAccSpecs(this.form.accId)
                })
              }
            } else {
              if (res.msg) {
                Notify({ type: 'warning', message: res.msg })
              } else {
                Notify({ type: 'warning', message: '获取列表失败！' })
              }
            }
          })
        } catch (error) {
          Notify({ type: 'warning', message: '获取列表失败！' })
        } finally {
          this.loading = false
        }
      } else {
        this.form = {}
        this.supply = ''
        this.specs = ''
      }
    },
    async loadAccSupply(id) {
      try {
        postAction(`/basemgt-material/accessories/supply/list`, { accId: id }).then(res => {
          if (res.code == 200) {
            res.data.map(item => {
              if (item.defaultStatus == 1) {
                this.supply = item.supplyName
              }
            })
          } else {
            if (res.msg) {
              Notify({ type: 'warning', message: res.msg })
            } else {
              Notify({ type: 'warning', message: '获取供应商失败！' })
            }
          }
        })
      } catch (error) {
        Notify({ type: 'warning', message: '获取供应商失败！' })
      }
    },
    async loadAccSpecs(id) {
      try {
        postAction(`/basemgt-material/accessories/specs/list`, { accId: id }).then(res => {
          if (res.code == 200) {
            const arr = []
            res.data.map(item => {
              arr.push(item.name)
            })
            this.specs = arr.toString()
          } else {
            if (res.msg) {
              Notify({ type: 'warning', message: res.msg })
            } else {
              Notify({ type: 'warning', message: '获取规格失败！' })
            }
          }
        })
      } catch (error) {
        Notify({ type: 'warning', message: '获取规格失败！' })
      }
    },

    onSubmit(values) {
      console.log(values)
    }
  }
}
</script>
<style scoped>
.title {
  text-align: center;
  padding: 10px;
  font-size: 18px;
  font-weight: 500;
}
.upload::after {
  content: '*填写说明：ID需露出';
  color: red;
  font-size: 12px;
}
.info::after {
  content: '*填写说明：售卖品牌、货季、折扣等';
  color: red;
  font-size: 12px;
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
}
</style>
<style>
#detail .van-field--disabled .van-field__label {
  color: #646566;
}
</style>